<!DOCTYPE html>
<html lang="zh">

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no" name="format-detection">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="keywords" content="" /> <!-- 关键字 -->
    <meta name="description" content="" /> <!-- 描述 -->
    <!-- 引入css -->
    <link rel="stylesheet" href="./css/ionic-change.css">
    <link rel="stylesheet" href="./css/store.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <title>选择车型</title>
  </head>

  <body style="background: #F2F2F2;">
    <div class="container">
      <div class="malllhead_box borbottom">
        <div class="swiper-container swiper1">
          <div class="swiper-wrapper swiper-swiper1">
            <div class="swiper-slide on">
              <div class="status " data-statue="">全部</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="0">经济型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="1">商务型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="2">豪华型</div>
            </div>
            <div class="swiper-slide">
              <div class="status" data-statue="3">6-15座商务</div>
            </div>
          </div>
        </div>
      </div>
      <div class="Daily_System">
        <ul class="Daily_System_page">
          <li>
            <div class="monthly--item">
              <div class="car_img">
                <img src="./images/car01.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price">
                  <em>￥800</em>/日均
                </div>
              </div>
            </div>

          </li>
          <li>
            <div class="monthly--item">
              <div class="car_img">
                <img src="./images/car01.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price">
                  <em>￥800</em>/日均
                </div>
              </div>
            </div>
          </li>
        </ul>
        <ul class="Daily_System_page hide">
          <li>
            <div class="monthly--item">
              <div class="car_img">
                <img src="./images/car01.png" alt="">
              </div>
              <div class="car_info">
                <span class="title">新BMW 4系敞篷轿跑车</span>
                <p class="order">
                  <span class="name">三厢</span>
                  <span class="type">2.0自动</span>
                  <span>乘坐5人</span>
                </p>
                <div class="price">
                  <em>￥800</em>/日均
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="sort_price">
        </div>
      </div>
      <div class="footer">
        <img src="./images/foot.png" alt="">
      </div>
    </div>
  </body>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/rem.js"></script>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper1 = new Swiper('.swiper1', {
      slidesPerView: 4.5,
      paginationClickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
      spaceBetween: 10, //slide之间的距离（单位px）。
      freeMode: true, //默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。
      loop: false //是否可循环
    });
    //tab
    $(".swiper-swiper1 .swiper-slide ").on("click ", function () {
      $(".swiper-wrapper .swiper-slide").removeClass("on");
      $(this).addClass("on ");
      var index = $(this).index();
      console.log(index)
      $(".Daily_System ").children(".Daily_System_page").hide();
      $(".Daily_System ").children(".Daily_System_page").eq(index).show();
    });
    // 价格排序
    $('.sort_price').click(function () {
      $(this).toggleClass("active");
    })
  </script>

</html>